<template>
	<div class="right-top">
		<div class="module-title">
			<span class="text">疲劳度监测</span>
			<SelectView year @change="change" />
		</div>

		<ul class="first-list">
			<li>疲劳程度统计</li>
<!--			<li>-->
<!--        疲劳度 :-->
<!--				<span class="value">{{ data.bmi }}</span>-->
<!--			</li>-->
		</ul>

		<ul class="content-area-above">
			<li style="width: 49%">
				<div>过轻</div>
				<div class="value">{{ data.light }}<span class="unit">人</span></div>
			</li>
			<div class="line"></div>
			<li style="width: 49%">
				<div>正常</div>
				<div class="value">{{ data.healthy }}<span class="unit">人</span></div>
			</li>

      <li style="width: 49%">
				<div>疲劳</div>
				<div class="value">
					{{ data.overweight }}<span class="unit">人</span>
				</div>
			</li>
			<div class="line"></div>
      <li style="width: 49%">
				<div>极度疲劳</div>
				<div class="value">{{ data.fat }}<span class="unit">人</span></div>
			</li>
<!--			<div class="line"></div>-->
<!--			<li>-->
<!--				<div>极度肥胖</div>-->
<!--				<div class="value">{{ data.ofat }}<span class="unit">人</span></div>-->
<!--			</li>-->
		</ul>

		<ul class="legend">
			<li>
				<span style="color: rgb(77, 235, 255);">疲劳度≤60过轻</span>
				<span style="color: rgb(127, 222, 151);">60&lt;疲劳度&lt;80正常</span>
			</li>

			<li>
        <span style="color: rgb(255, 226, 102);">80&lt;疲劳度&lt;100疲劳</span>
				<span style="color: rgb(230, 58, 58);">100&lt;疲劳度 极度疲劳</span>
			</li>
		</ul>

		<div class="right-top-chart" id="right-weight-chart"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import { weightOption } from './options';
import SelectView from './SelectView.vue';
import { getWightData } from '@/api';
export default {
	name: 'right-top',
	components: {
		SelectView,
	},
	data() {
		return {
			chart: null,
			data: {},
		};
	},
	mounted() {
		const chart = echarts.init(document.getElementById('right-weight-chart'));
		this.chart = chart;
		this.eventBus.$on('resize', () => {
			if (this.chart) this.chart.resize();
		});
	},
	methods: {
		//  根据筛选条件 默认触发一次
		change(year) {
			this.getData(year);
		},

		async getData(year) {
			const result = await getWightData(year);
			const { bmi, fat, healthy, light, ofat, overweight, weight } = result;
			this.data = result;
			const list = [light, healthy, overweight, fat, ofat];
			this.chart.setOption(weightOption(list));
		},
	},

	beforeDestroy() {
		if (this.chart) this.chart.dispose();
		this.eventBus.$off('resize');
	},
};
</script>
<style lang="scss">
.right-top {
	padding: 1vh 2%;

	.first-list {
		width: 70%;
		margin: 0.8vh auto 0 auto;
		display: flex;
		align-items: center;

		li {
			color: #fff;
			font-size: 1.4vh;
			opacity: 0.7;
			line-height: 4.074074vh;
			width: 33%;
			text-align: center;

			.value {
				font-weight: bold;
				color: rgb(97, 252, 255);
				opacity: 1;
			}

			&:first-child {
				font-weight: bold;
				opacity: 1;
			}
		}
	}

	.content-area-above {
		display: flex;
		color: #fff;
		flex-wrap: wrap;
		padding: 1vh 0;

		.line {
			width: 2px;
			background-image: linear-gradient(
				rgba(48, 147, 240, 0.6),
				rgba(48, 147, 240, 0)
			);
		}

		li {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			font-weight: bold;
			width: 30%;
			height: 5.2037vh;
			font-size: 1.3vh;

			.value {
				font-size: 1.85185vh;
				color: #37aaff;

				.unit {
					font-size: 1.3vh;
					font-weight: 400;
				}
			}
		}
	}

	.legend {
		width: 100%;
		font-size: 1.111111vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 1vh;

		li {
			font-weight: bold;
			width: 70%;
			display: flex;
			justify-content: space-evenly;
		}
	}

	.right-top-chart {
		height: 15.5vh;
		margin-right: 0.5vw;
	}
}
</style>
